<template>
	<view class="detail">
		<view class="img">
			<image  @click="showPopup(goods.mainImageUrl)" :src="goods.mainImageUrl+'?imageView2/2/w/750/q/85'" mode="widthFix"></image>
		</view>
		<view class="name">
			<view class="left">
				<text class="kind">{{goods.name}}</text>
				<!-- <text class="mc">品牌商：{{goods.brand}}</text> -->
			</view>
			<!-- <image :src="solarCode" @click="showPopup(solarCode)" class="code"></image> -->
			<button  open-type="share" class="share">
					<!-- <van-icon name="share" color="#FFC100"/> -->
					<image src="../../static/img/share.png" mode=""></image>
			</button>
		</view>
		<view class="lsj">
			<view class="pic">
				<text class="dw">￥</text>
				<text class="jg">
				{{goods.factoryPrice}}
				</text>
				<text class="xs">.00</text>
				<text class="ls" style="text-decoration:line-through">
					￥{{goods.retailPrice}}.00
				</text>
			</view>
			<view class="rightBox">
				<view class="saleNum">
					<van-icon name="fire" size="18" color="#FFC100"/>
					<text>{{goods.saleNum || '0'}}</text>
				</view>
				<view :class="['right', goods.isCollect==1 ?'act' :'']" @click="collection(goods.id,goods.isCollect)">
					<van-icon v-if="goods.isCollect==1" size="16" color="#fff" name="like" />
					<van-icon v-else  size="16" name="like-o" />
					<text>收藏</text>
				</view>
			</view>
		</view>
		<view class="md">
			{{goods.intro}}
		</view>
		<!-- <view class="bz">
			<view>
				<van-icon name="gem-o" color="#368FFE"/>
				<text>品牌制造商直供</text>
			</view>
			<view>
				<van-icon name="shop-o" color="#368FFE"/>
				<text>线下真实体验</text>
			</view>
			<view>
				<van-icon name="passed" color="#368FFE"/>
				<text>十年质保 终生维护</text>
			</view>
		</view> -->
		<view class="cs">
			<view class="tab">
				<view :class="[active==1 ? 'act' :'']" @click="onchange(1)">商品详情</view>
				<view :class="[active==2 ? 'act' :'']" @click="onchange(2)">参数信息</view>
			</view>
			<view class="bt" v-show="active==1">
					<!-- <image @click="showPopup('https://yueyuan-1319780509.cos.ap-chengdu.myqcloud.com/12.png')" src="https://yueyuan-1319780509.cos.ap-chengdu.myqcloud.com/12.png" mode="widthFix"></image> -->
					<image @click="showPopup(goods.imageList[index])" v-for="(item,index) in goods.imageList" :key="index" :src="item+'?imageView2/2/w/750/q/90'" mode="widthFix"></image>
			</view>
			<view class="bt" v-show="active==2">
				<view class="xx">
					<view class="ht">商品尺寸和包装信息</view>
					<view class="canshsu" v-if="goods.brand">
						<view>品牌</view>
						<view>{{goods.brand}}</view>
					</view>
					<view class="canshsu" v-if="goods.place">
						<view>产地</view>
						<view>{{goods.place}}</view>
					</view>
					<view class="canshsu" v-if="goods.model">
						<view>型号</view>
						<view>{{goods.model}}</view>
					</view>
					<view class="canshsu" v-if="goods.material">
						<view>材质</view>
						<view>{{goods.material}}</view>
					</view>
					<view class="canshsu" v-if="goods.colourNo">
						<view>色号</view>
						<view>{{goods.colourNo}}</view>
					</view>
					<view class="canshsu" v-if="goods.series">
						<view>系列</view>
						<view>{{goods.series}}</view>
					</view>
					<view class="canshsu" v-if="goods.sellPoint">
						<view>风格</view>
						<view>{{goods.sellPoint}}</view>
					</view>
					<view class="canshsu" v-if="goods.size">
						<view>尺寸</view>
						<view>{{goods.size}}</view>
					</view>
					<!-- <view>
						<view>是否需组装</view>
						<view>是</view>
					</view>
					<view>
						<view>商品款号</view>
						<view>Xd7205652644611209876</view>
					</view> -->
					<!-- <view>
						<view>商品编号</view>
						<view>{{goods.brand}}</view>
					</view> -->
				</view>	
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			collect: 0,
			goods:{
				name:'',//名称
				brand:'',//品牌
				status: 0,//上下架状态：1.上架 0.下架
				code:'',//产品编码
				facpzryPrice:'0',//出厂价
				retailPrice:'0',//零售价
				intro:'',//商品简介
				id:'',//商品id
				merchantId:'',//所属商城（平台或推广者）
				styleId:'',//分类id
				model:'',//型号
				material:'',//材质
				colourNo:"",//色号
				series:'',//系列
				sellPoint:'',//风格
				size:'',//尺寸
				place:'',//商品产地
				imageList:[],//图片资源
				isCollect:0,
			},
			arr:[],
			solarCode:'',
			
			
			active:1
		}
	},
	onLoad(query) {
		if(query.id){
			let id = query.id;
			this.getDetail(id);
		}
	},
	onShareAppMessage(){
	},
	methods:{
		onchange(val){
			this.active=val;
		},
		showPopup(url) {
			wx.previewMedia({
				sources:[{
					url:url,
					type: 'image'
				}]
			})
		},
		showCollect(){
			if(uni.getStorageSync("arr")){
				let that=this;
				let id=this.goods.id;
				uni.getStorage({
					key: 'arr',
					success(res) {
						let arr=JSON.parse(res.data);
						arr.forEach(x=>{
							if(x.id==id){
								that.collect=1;
							}
						})
						that.arr=arr;
					}
				});
			}else{
				uni.setStorageSync("arr","[]")
			}
		},
		collection(commodityId,val){
			let userId=uni.getStorageSync('userId')
			if(userId){
				if(val==0){
				const requestParam = {
					url: "/app/mall/addUserCommodity",
					method: "POST",
					data:{
						commodityId: commodityId,
						userId: userId,
					},
					callBack: (res) => {
						console.log(res,'收藏成功')
						this.goods.isCollect=1
					}
				}
				this.$request(requestParam);
				}else{
					const requestParam = {
						url: "/app/mall/removeUserCollect?commodityId="+commodityId+'&userId='+userId,
						method: "POST",
						callBack: (res) => {
							console.log(res,'取消收藏')
							this.goods.isCollect=0
						}
					}
					this.$request(requestParam);
				}
				
			}else{
				uni.navigateTo({
					url: '/pages/me/user'
				});
			}
		},
		getDetail(id){
			const requestParam = {
				url: "/app/mall/getCommodityById",
				method: "GET",
				data:{
					commodityId:id,
					userId: uni.getStorageSync('userId')
				},
				callBack: (res) => {
					this.goods=res.data;
					this.goods.retailPrice=this.goods.retailPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
					this.goods.factoryPrice=this.goods.factoryPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
				}
			}
			this.$request(requestParam);
		},
		// getCode(){
		// 	const requestParam = {
		// 		url: "/app/weChat/applyCode",
		// 		method: "GET",
		// 		data:{
		// 			page:'pages/detail/index',
		// 			scene: this.goods.id
		// 		},
		// 		callBack: (res) => {
		// 			this.solarCode="data:image/png;base64,"+res;
		// 		}
		// 	}
		// 	this.$specialRequest(requestParam);
		// }
	}
}		
</script>

<style lang="scss">
@import './style.scss';
</style>